<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Simple test</title>
		<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
		<!--<script type="text/javascript" src="../../jquery.zoomooz.min.js"></script>-->
		<script type="text/javascript" src="../../src/js/jquery.zoomooz-anim.js"></script>
		<script type="text/javascript" src="../../src/js/jquery.zoomooz-core.js"></script>
		<script type="text/javascript" src="../../src/js/purecssmatrix.js"></script>
		<script type="text/javascript" src="../../src/js/sylvester.src.stripped.js"></script>
		
		<script type="text/javascript">
			
			var zoomTargetElements = ["#container","#item1","#item2","#item2b","#item3","#item3b","#item4"];
			var zoomTargetIndex = 0;
			
			$(document).ready(function() {
				$.zoomMooz.setup({root:$("#container"),targetsize:0.8});
				
			    $(".zoomTarget").click(function(evt) {
					evt.stopPropagation();
					$(this).zoomTo({debug:true});
				});
				
				$("#container").zoomTo();
				
				$("#next").click(function(evt) {
					zoomTargetIndex++;
					if(zoomTargetIndex>=zoomTargetElements.length) {
						zoomTargetIndex-=zoomTargetElements.length;
					}
					$(zoomTargetElements[zoomTargetIndex]).zoomTo({debug:true});
				});
				
				$("#prev").click(function(evt) {
					zoomTargetIndex--;
					if(zoomTargetIndex<0) {
						zoomTargetIndex+=zoomTargetElements.length;
					}
					$(zoomTargetElements[zoomTargetIndex]).zoomTo({debug:true});
				});
			});
		</script>
	</head>
	<body>
		<h3>Zooming inside a container</h3>
	    <div id="outerContainer">
			<div id="container" class="zoomTarget">
			<div id="item1" class="zoomTarget"></div>
			<div id="item2" class="zoomTarget"></div>
			<div id="item2b" class="zoomTarget"></div>
			<div id="item3" class="zoomTarget">
			<div id="item3b" class="zoomTarget"></div>
			</div>
			<div id="item4" class="zoomTarget"></div>
			</div>
	    </div>
	    <div id="navigation">
			<div id="prev">&lt;</div>
			<div id="next">&gt;</div>
		</div>
	</body>
	
	<!--************************
		**  GOOGLE ANALYTICS      **
		*************************-->
			
			<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-16288001-1");
pageTracker._trackPageview();
} catch(err) {}</script>

</html>
	